<template>
	<view>
		<view class="bg">
			<uv-navbar placeholder :bgColor="bgc" left-icon="">
				<template v-slot:left>
					<text class="fs-20 fw-600  mx-10 block w-50">搜题</text>
				</template>
			</uv-navbar>
			<view class="mt-22 px-12">
				<view class="border-black rounded-20 px-15 py-12 bg-white">
					<textarea placeholder-class="fs-14 text-grey-4 leading-23" class="w-p-100 h-140" v-model="keyword"
						placeholder="输入题干或关键词进行搜索，或粘贴剪贴板内容，不能有错别字只要题干，不要带选项，可输入题干关键字..">
					</textarea>
					<view class="flex fs-14">
						<view class="w-p-70 flex flex-y-center">
							<view class="flex flex-y-center" @click="paste">
								<image src="@/static/search/fz.png" class="w-16 h-16"></image>
								<text class="ml-2">清除并粘贴</text>
							</view>
							<view class="flex flex-y-center ml-20" @click="keyword=''">
								<image src="@/static/search/qc.png" class="w-16 h-16"></image>
								<text class="text-grey-4 ml-2">清除内容</text>
							</view>
						</view>
						<view class="w-p-30 text-right flex flex-center" style="border-left: 2rpx solid #000;"
							@click="search()">
							<uv-icon name="search" size="18" color="#3D5CFF"></uv-icon>
							<text class="text-blue-1 ">搜索</text>
						</view>
					</view>
				</view>
			</view>
			<view class="pr-16 flex flex-x-space-between flex-y-center mt-20" v-if="record">
				<view class="flex flex-y-center">
					<view class="w-4 h-15 rounded-right-8 bg-blue-1"></view>
					<text class="fs-16 fw-600 ml-8">搜索历史</text>
				</view>
				<view class="flex flex-y-center" @click="clear">
					<text class="fs-14 text-blue-1">清空记录</text>
					<uv-icon name='trash' color="#3D5CFF" size='18'></uv-icon>
				</view>
			</view>
		</view>

		<view class="px-16 fs-15" v-if="record">
			<view class="bg-white rounded-8 px-14 py-10 flex flex-x-space-between mt-10"
				v-for="(item,index) in recordList" :key='index' @click="keyword=item;search()">
				<text>{{item}}</text>
				<uv-icon name="arrow-right" color="#acacac"></uv-icon>
			</view>
		</view>


		<view class="px-16 fs-15">
			<view v-for="(item,index) in list" :key='index' class="position-relative"
				 v-if="list.length">
				
				<view @click="$page.open('/pages/package/package')" class="w-p-100 h-p-100 position-absolute top-0 flex flex-center"  v-if="USERINFO?.is_vip==2&&item.is_selected=='1'" style="z-index: 999;">
					<uv-icon name='lock-fill' size="20" color="#3D5CFF"></uv-icon>
					<text class="ml-4 fs-15">VIP查看</text>
				</view>
				<view v-if="USERINFO?.is_vip==2&&item.is_selected=='1'"
					class=" p-12 rounded-8 bg-white  mt-8 " :class="{'blur-effect':USERINFO?.is_vip==2&&item.is_selected=='1'}">
					<view class="flex">
						<image src="@/static/search/w.png" class="w-21 h-19" style="min-height: 19px;min-width: 21px;">
						</image>
						<text class="ml-4 ">{{item.topic}}</text>
					</view>
					<view class="p-12 bg-grey-6 flex mt-10 rounded-8">
						<image src="@/static/search/d.png" class="w-21 h-19" style="min-height: 19px;min-width: 21px;">
						</image>
						<text class="ml-4 fs-14 text-grey-1">{{item.answer}}</text>
					</view>
				</view>
				<view v-else class="p-12 rounded-8 bg-white  mt-8" @click="$page.open('/pages/topic/topic?type=5&search_id='+ item.id)">
					<view class="flex">
						<image src="@/static/search/w.png" class="w-21 h-19" style="min-height: 19px;min-width: 21px;">
						</image>
						<text class="ml-4 ">{{item.topic}}</text>
					</view>
					<view class="p-12 bg-grey-6 flex mt-10 rounded-8">
						<image src="@/static/search/d.png" class="w-21 h-19" style="min-height: 19px;min-width: 21px;">
						</image>
						<text class="ml-4 fs-14 text-grey-1">{{item.answer}}</text>
					</view>
				</view>
			</view>
			<view class="flex flex-center" v-if="empty">
				<image :src="WEBCONFIG?.empty" class="w-180 h-150"></image>
			</view>
		</view>

		<y-loading v-if="status"></y-loading>
	</view>
</template>

<script setup>
	import { ref, defineProps } from 'vue'
	import { $page, $tool, $http, useStorage } from '@/utils'
	import { onLoad, onPageScroll } from '@dcloudio/uni-app'
	import { useRefs, useUserStore, useWebConfigStore } from "@/stores/index";

	const { USERINFO } = useRefs(useUserStore());
	const { WEBCONFIG } = useRefs(useWebConfigStore());
	const list = ref([])
	const keyword = ref()
	const status = ref(false)
	const empty = ref(false)
	const bgc = ref('none')
	const record = ref(true)
	const recordList = ref([])
	onLoad(() => {
		recordList.value = useStorage().get('RECORD') || []
		if (recordList.value.length == 0)[
			empty.value = true
		]
	})
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			bgc.value = "#fff"
		}
		if (e.scrollTop < 100) {
			bgc.value = "none"
		}
	})
	const paste = () => {
		uni.getClipboardData({
			complete(res) {
				keyword.value = res.data
			}
		})
	}
	const search = () => {
		if (!keyword.value) {
			$tool.toast('请输入搜索内容');
			return;
		}
		status.value = true
		$http.get('Topic/search', { keyword: keyword.value }).then(res => {
			list.value = res.data
			if (!list.value.length) {
				record.value = false
				empty.value = true
				status.value = false
				return;
			}
			empty.value = false
			record.value = false
			let option = []
			let answer = null
			for (let i = 0; i < list.value.length; i++) {
				if (list.value[i].type == 'blank') {
					continue;
				}
				option = JSON.parse(list.value[i].option);
				answer = list.value[i].answer
				for (let j = 0; j < option.length; j++) {
					list.value[i].answer = ''
					if (list.value[i].type == 'single' && answer == option[j]['value']) {
						list.value[i].answer = option[j]['label'];
						break;
					}
					if (list.value[i].type == 'multiple' && answer.includes(option[j]['value'])) {
						list.value[i].answer += option[j]['label'] + ' '
					}
				}
			}
			status.value = false

			if (!recordList.value.includes(keyword.value)) {
				recordList.value.push(keyword.value)
				useStorage().set('RECORD', recordList.value)
			}
		}).catch(() => {
			status.value = false
		});
	}

	const clear = () => {
		recordList.value = []
		useStorage().remove('RECORD')
		status.value = false
		empty.value = true
	}
</script>

<style>
	.bg {
		height: 700rpx;
		background: radial-gradient(circle at -30% -10%, #78DDFF -100%, transparent 70%);
		background-repeat: no-repeat;
		background-position: top center;
		/* #ifdef H5 */
		background-attachment: fixed;
		/* #endif */
	}


	.under-line {
		border-bottom: 2rpx solid #eee;
	}

	.box {
		box-shadow: 0px 2px 10px 5px #eee;
	}

	.blur-effect {
		filter: blur(3px);
	}
</style>